<template>
  <div id="app">
    <div v-show="bol" class="footer_cs">
      <router-link to="/home">
        <span>
          <span :class="{ 'router-link-active': isshow}" class="icon-home"></span>
          <!-- <img src="http://m.caissa.com.cn/static/img/sy01.png" width="22" height="20"> -->
        </span>
        <span  :class="{ 'router-link-active': isshow}" class="footer_a footer_a01 footer_aa ">首页</span>
      </router-link>
      <router-link to="/mudi">
        <span>
          <span class="icon-app"></span>
          <!-- <img src="http://m.caissa.com.cn/static/img/flh02.png" width="22" height="20"> -->
        </span>
        <span class="footer_a footer_a01 footer_aa">目的地</span>
      </router-link>
      <router-link to="/guanjia">
        <span>
          <span class="icon-guanjia"></span>
          <!-- <img src="http://m.caissa.com.cn/static/img/csgj.png" width="22" height="20"> -->
        </span>
        <span class="footer_a footer_a01 footer_aa">凯撒管家</span>
      </router-link>
      <router-link to="/mine">
        <span>
          <span class="icon-mine"></span>
          <!-- <img src="http://m.caissa.com.cn/static/img/ren.png" width="22" height="20"> -->
        </span>
        <span class="footer_a footer_a01 footer_aa">个人中心</span>
      </router-link>
    </div>

    <router-view></router-view>
  </div>
</template>

<script>
import Vue from 'vue'
//配置轮播图组件
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
export default {
  data(){
    return {
      isshow:true,
      bol:true
    }
  },
  watch:{
    '$route'(){
      console.log("jian  ting  lu  you");
      console.log(this.$route.path);
      switch (this.$route.path) {
        case '/':this.bol = true;
        case '/home':this.bol = true;
        case '/mudi':this.bol = true;
        case '/mudi/item':this.bol = true;
        case '/mudi/1':this.bol = true;
        case '/mudi/2':this.bol = true;
        case '/mudi/3':this.bol = true;
        case '/mudi/4':this.bol = true;
        case '/mudi/5':this.bol = true;
        case '/mudi/6':this.bol = true;
        case '/mudi/7':this.bol = true;
        case '/mudi/8':this.bol = true;
        case '/mudi/9':this.bol = true;
        case '/mudi/10':this.bol = true;
        case '/mine':this.bol = true;
        case '/mine/two':this.bol = true;
        case '/mine/one':this.bol = true;
        case '/guanjia':this.bol = true;
        case '/aftermine':this.bol = true;
        break;
        default:this.bol = false;

      }
      this.isshow = false;
    }
  }

}
</script>

<style>
a{
  color:gray;
}
.icon-home,.icon-app,.icon-guanjia,.icon-mine{
  font-size: 2.5rem;
}
.icon-home:before {
  content: "\e906";
}
.icon-app:before {
  content: "\e900";
}
.icon-guanjia:before {
  content: "\e905";
}
.icon-mine:before {
  content: "\e902";
}
.footer_cs {
    width: 100%;
    position: fixed;
    z-index: 100;
    height: 53px;
    left: 0px;
    bottom: 0px;
    background: rgba(255,255,255,0.95);
    display: flex;
    justify-content: space-around;

}
a{
  color: #999999;
}
.footer_a01 {
    padding-top: 0px;
    padding-bottom: 3px;
}
.footer_a {
    width: 100%;
    display: inline-block;
    padding-top: 3px;
    text-align: center;
    font-size: 14px;
    float: left;
}
.router-link-active{
  color: #00b0ec;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>
